<template>
	<view class="page-container">
		<view class="page-layout" style="min-width: 1288px">
			<!-- 数据统计 -->
			<view class="tab-title">数据统计</view>
			<view class="data-statistics">
				<view class="data-counts">
					<!-- <view class="data-count-item ellipsis">
						<view class="top top1"></view>
						<text class="title">房源总统计</text>
						<view class="count">
							<text class="t1 left">
								{{ dataCount.sum1.totalCount || 0 }}
								<text class="unit">总</text>
							</text>
							<text class="t1">
								/{{ dataCount.sum1.useCount || 0 }}
								<text class="unit">已配租</text>
							</text>
						</view>
					</view> -->
					<view class="data-count-item color1 ellipsis">
						<view class="top"></view>
						<view class="count">
							<view class="icon">安</view>
							<view class="count-num">
								<view class="t1 left">
									{{ dataCount.sum2.totalCount || 0 }}
									<view class="unit">安置房(限购房)</view>
								</view>
								<view class="t1 right">
									{{ dataCount.sum2.useCount || 0 }}
									<view class="unit">已选</view>
								</view>
							</view>
						</view>
						<view class="process">
							<view class="process-num" :style="getPercent(dataCount.sum2.useCount,dataCount.sum2.totalCount)"></view>
						</view>
					</view>
					
					<view class="data-count-item color2 ellipsis">
						<view class="top"></view>
						<view class="count">
							<view class="icon">人</view>
							<view class="count-num">
								<view class="t1 left">
									{{ dataCount.sum3.totalCount || 0 }}
									<view class="unit">安置房(限购房)</view>
								</view>
								<view class="t1 right">
									{{ dataCount.sum3.useCount || 0 }}
									<view class="unit">已选</view>
								</view>
							</view>
						</view>
						<view class="process">
							<view class="process-num" :style="getPercent(dataCount.sum3.useCount,dataCount.sum3.totalCount)"></view>
						</view>
					</view>

					<view class="data-count-item color3 ellipsis">
						<view class="top"></view>
						<view class="count">
							<view class="icon">廉</view>
							<view class="count-num">
								<view class="t1 left">
									{{ dataCount.sum4.totalCount || 0 }}
									<view class="unit">安置房(限购房)</view>
								</view>
								<view class="t1 right">
									{{ dataCount.sum4.useCount || 0 }}
									<view class="unit">已选</view>
								</view>
							</view>
						</view>
						<view class="process">
							<view class="process-num" :style="getPercent(dataCount.sum4.useCount,dataCount.sum4.totalCount)"></view>
						</view>
					</view>

					<view class="data-count-item color4 ellipsis">
						<view class="top"></view>
						<view class="count">
							<view class="icon">保</view>
							<view class="count-num">
								<view class="t1 left">
									{{ dataCount.sum5.totalCount || 0 }}
									<view class="unit">安置房(限购房)</view>
								</view>
								<view class="t1 right">
									{{ dataCount.sum5.useCount || 0 }}
									<view class="unit">已选</view>
								</view>
							</view>
						</view>
						<view class="process">
							<view class="process-num" :style="getPercent(dataCount.sum5.useCount,dataCount.sum5.totalCount)"></view>
						</view>
					</view>

					<view class="data-count-item color5 ellipsis">
						<view class="top"></view>
						<view class="count">
							<view class="icon">共</view>
							<view class="count-num">
								<view class="t1 left">
									{{ dataCount.sum6.totalCount || 0 }}
									<view class="unit">安置房(限购房)</view>
								</view>
								<view class="t1 right">
									{{ dataCount.sum6.useCount || 0 }}
									<view class="unit">已选</view>
								</view>
							</view>
						</view>
						<view class="process">
							<view class="process-num" :style="getPercent(dataCount.sum6.useCount,dataCount.sum6.totalCount)"></view>
						</view>
					</view>
					
        </view>
      </view>

      <!-- 数据统计 -->
      <view class="tab-title">数据大屏快捷入口</view>
      <view class="data-v-group">
        <view class="item" @click="onOpen('/dp/')">
          <text class="label">临安区保障性用房数据驾驶舱</text>
          <image class="image" mode="aspectFit" src="../static/img/dp-1.jpg"></image>
          <view class="info">
            <view class="firist">
              <image class="fullscreen" mode="aspectFit" src="../static/img/fullscreen.png"></image>
              <text class="text">打开查看</text>
            </view>
            <text class="separator"></text>
            <view class="last" @click.stop="onCopy('/dp/')">
              <image class="link" mode="aspectFit" src="../static/img/link.png"></image>
              <text class="text">复制链接</text>
            </view>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import { getSummary } from '@/common/services/house.js';
export default {
	data() {
		return {
			dataCount: {
				sum1: {
					totalCount: 0,
					useCount: 0
				},
				sum2: {
					totalCount: 0,
					useCount: 0
				},
				sum3: {
					totalCount: 0,
					useCount: 0
				},
				sum4: {
					totalCount: 0,
					useCount: 0
				},
				sum5: {
					totalCount: 0,
					useCount: 0
				},
				sum6: {
					totalCount: 0,
					useCount: 0
				}
			}
		};
	},
	onLoad() {
		this.list();
	},
	methods: {
    list() {
      let self = this;
      getSummary().then(ret => {
        self.dataCount = ret;
      });
    },
    onOpen(url) {
      if (!url || url.length === 0) {
        this.$utils.notify('敬请期待!', 'warning');
        return;
      }
      window.open(url + "?from=1", '_blank');
    },
    onCopy(text) {
      let that = this;
      if (text.indexOf('http://') < 0 && text.indexOf('https://') < 0) {
        text = location.origin + text;
      }
      uni.setClipboardData({
        data: text,
        showToast: false,
        success() {
          that.$utils.notify('复制成功!');
        }
      });
    },
		getPercent(val1,val2){
			let perNum = 0
			if(val1 && val2){
				perNum = (val1 / val2) * 100
			}
			return `width:${perNum}%`
		},
  }
};
</script>

<style lang="scss" scoped>
@import 'home.scss';
</style>
